<template>
	<view class="container" style="background-color: #FFFFFF;padding-top: 20rpx;padding-bottom: 20rpx;">
		<!-- #ifdef MP -->
		<bmiHeightEChart v-if="heightLineValues.length>0" :useOldCanvas="forceUseOldCanvas" :beginIndex="beginIndex" :endIndex="endIndex" :monthBaseValues="monthBaseValues" :lineNames="heightLineNames" :lineValues="heightLineValues" :actualMonth="actualMonth" :height="actualHeight"></bmiHeightEChart>
		<!-- #endif -->
		<!-- #ifndef MP -->
		<bmiHeightChart v-if="heightLineValues.length>0" :beginIndex="beginIndex" :endIndex="endIndex" :monthBaseValues="monthBaseValues" :lineNames="heightLineNames" :lineValues="heightLineValues" :actualMonth="actualMonth[0]" :height="actualHeight[0]"></bmiHeightChart>
		<!-- #endif -->
		<text class="bmi-chart-hint" style="margin-bottom: 20rpx;">{{heightConclusion}}</text>
		
		<view class="ling-view" style="margin-bottom: 20rpx;"></view>
		
		<!-- #ifdef MP -->
		<bmiWeightEChart v-if="weightLineValues.length>0" :useOldCanvas="forceUseOldCanvas" :beginIndex="beginIndex" :endIndex="endIndex" :monthBaseValues="monthBaseValues" :lineNames="weightLineNames" :lineValues="weightLineValues" :actualMonth="actualMonth" :weight="actualWeight"></bmiWeightEChart>		
		<!-- #endif -->
		<!-- #ifndef MP -->
		<bmiWeightChart v-if="weightLineValues.length>0" :beginIndex="beginIndex" :endIndex="endIndex" :monthBaseValues="monthBaseValues" :lineNames="weightLineNames" :lineValues="weightLineValues" :actualMonth="actualMonth[0]" :weight="actualWeight[0]"></bmiWeightChart>
		<!-- #endif -->
		<text class="bmi-chart-hint">{{weightConclusion}}</text>
	</view>
</template>

<script>
	import bmiHeightChart from './assess-bmi-height.vue'
	import bmiWeightChart from './assess-bmi-weight.vue'
	import bmiHeightEChart from './bmi-height-echart.vue'
	import bmiWeightEChart from './bmi-weight-echart.vue'
	
	export default {
		components: {
			bmiHeightChart,
			bmiWeightChart,
			bmiHeightEChart,
			bmiWeightEChart
		},
		
		props:{
			bmi: {
				type: Object,
				default (){
					return {}
				}
			},
			
			birthday:{
				type: String,
				default () {
					return ''
				}
			},
			gender:{
				type: Number,
				default () {
					return ''
				}
			},
			height:{
				type: String,
				default () {
					return ''
				}
			},
			weight:{
				type: String,
				default () {
					return ''
				}
			},
			name:{
				type: String,
				default () {
					return ''
				}
			},
			
			forceUseOldCanvas:{
				type: Boolean,
				default () {
					return false
				}
			},
		},
		
		data() {
			return {
				monthBaseValues: [],
				heightLineValues: [],
				weightLineValues: [],
				heightConclusion: '',
				weightConclusion: '',
				heightLineNames: [],
				weightLineNames: [],
				actualMonth: [],
				actualHeight: [],
				actualWeight: [],
				
				beginIndex: 0,
				endIndex: 0,
			};
		},
		
		created() {
			console.log(this.$props.birthday)
			this.init();
		},
		
		methods: {
			///查询
			init(){
				this.monthBaseValues = this.$props.bmi.monthBaseValuesV2;
				this.heightLineValues = this.$props.bmi.heightLineValuesV2;
				this.weightLineValues = this.$props.bmi.weightLineValuesV2;
				this.heightConclusion = this.$props.bmi.heightConclusion;
				this.weightConclusion = this.$props.bmi.weightConclusion;
				this.heightLineNames = this.$props.bmi.heightLineNamesV2;
				this.weightLineNames = this.$props.bmi.weightLineNamesV2;
				
				this.actualMonth[0] = this.$props.bmi.actualMonth;
				this.actualHeight[0] = this.$props.height;
				this.actualWeight[0] = this.$props.weight;
				
				var beginIndex = 0;
				var endIndex = 0;
				var monthIndex = 0;
				var monthArray = [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 18, 21, 24, 30, 36, 42, 48, 54, 60, 66, 72];
				monthArray = this.monthBaseValues;
				endIndex = monthArray.length - 1;
				
				// for (var index in monthArray) {
				// 	if (this.$props.actualMonth <= monthArray[index]) {
				// 		monthIndex = parseInt(index);
				// 		break;
				// 	}
				// }
				// if (monthIndex < 5) {
				// 	beginIndex = 0;
				// 	endIndex = monthIndex + 5 ;
				// } else if (monthIndex > 16) {
				// 	endIndex = 20;
				// 	beginIndex = monthIndex - 5;
				// } else{
				// 	beginIndex = monthIndex - 5;
				// 	endIndex = monthIndex + 5;
				// }
				
				this.beginIndex = beginIndex;
				this.endIndex = endIndex;
			},
		}
	}
</script>

<style>
	.bmi-container{
		display: flex;
		flex-direction: column;
	}

	.bmi-chart-hint{
		color: #333333;
		font-size: 26rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
	}

</style>
